<template>
  <div class="teacherTodetail">
    <div class="wrap">
      <div style="margin-top: 20px" class="Breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">讲师</el-breadcrumb-item>
          <el-breadcrumb-item>
            <a href="/">讲师详情</a>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="todetailinfo">
        <div class="teacher-left">
          <img :src="teachers.avatar" style="width: 170px; height: 230px" />
          <div class="teacher-right">
            <p class="name">{{ teachers.name }}</p>
            <div class="teacher-subject">
              <h3>高级讲师</h3>
            </div>
            <p class="teacher-intro">{{ teachers.intro }}</p>
          </div>
        </div>
      </div>
      <div class="teacher_footer">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
        <el-tab-pane label="主讲课程" name="first">  
  <div v-if="TeachercourseList.length > 0">  
    <el-row :gutter="20">  
      <el-col  
        :span="6"  
        v-for="item in TeachercourseList"  
        :key="item.id"  
      >  
        <el-card>  
          <template #header>  
            <img :src="item.cover" style="width: 100%; height: 200px" />  
          </template>  
          <div class="card-content">  
            <h3>{{ item.title }}</h3>  
            <div class="content-bottom">  
              <div>  
                <h3  
                  style="  
                    font-size: small;  
                    color: #67c23a;  
                    margin-top: 10px;  
                  "  
                >  
                  ￥免费  
                </h3>  
              </div>  
            </div>  
          </div>  
        </el-card>  
      </el-col>  
    </el-row>  
  </div>  
  <el-empty v-else description="暂无课程">  
  </el-empty>  
</el-tab-pane>
          <el-tab-pane label="评论" name="second">
            <el-empty description="暂无评价"> </el-empty>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRoute } from "vue-router";
import axios from "../../assets/js/axios";
const route = useRoute();
const teachers = ref<any>([]);
import type { TabsPaneContext } from "element-plus";
const TeachercourseList = ref<any>([]);
const activeName = ref("first");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
if (route.query.id) {
  // 课程信息请求
  axios
    .get(`/serviceedu/edu-teacher/getById/${route.query.id}`, {})
    .then((res: any) => {
      if (res.code === 200) {
        teachers.value = res.data.data;
      }
    });
}
const getList = () => {
  axios
    .get(`/serviceedu/edu-course/teacherCourse/${route.query.id}`, {})
    .then((res: any) => {
      //热门课程列表
      TeachercourseList.value = res.data.teacherCourse;
    });
};
getList();
</script>

<style lang="less" scoped>
.todetailinfo {
  margin-top: 20px;
  background-color: #64b5ec;
  .teacher-left {
    display: flex;
    .teacher-right {
      margin-left: 20px;
      .name {
        margin-top: 10px;
        font-size: 26px;
        color: #ffffff;
      }
      h3 {
        margin-top: 5px;
        color: #ffffff;
      }
      .teacher-intro {
        margin-top: 10px;
        font-size: 13px;
        color: #ffffff;
      }
    }
  }
}
.teacher_footer {
  margin-top: 20px;
}
</style>
